<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>购物车</title>
<link rel="stylesheet" href="__PUBLIC__/Mobile/css/zhanghou.css">
<script src="__PUBLIC__/Mobile/js/jquery-1.9.1.js"></script>
<script src="__PUBLIC__/Common/Layer/layer.js"></script>
</head>

<body>
<section>
<!--购物车-->
<div class="lm">
    <span class="left" style="width:20%;"><a href="javascript:history.back(-1);"><img src="__PUBLIC__/Mobile/images/cls_left1s.png" style="height:20px; line-height:20px; width:12%;padding-right:2%;"></a> </span>
    <span class="left size20" style="width:60%;">购物车 </span>
    <span onclick="del_all();"><img src="__PUBLIC__/Mobile/images/close.png" style="padding-bottom:3%;"><b style="font-size:1.4em; color:#33BC60;">清空</b></span>
</div>
<form action="{:U('Goods/goods_count')}" method="post" onSubmit="return check_form()">
<div class="shopping-cart " style="margin-bottom:13%">
   <volist name="result" id="vo">
        <ul>
           <li>
                <a href="javascript:void(0);" class="cart-select" id="cart_select{$vo.id}" onClick="cart_select({$vo.id});">&nbsp;
                    <input type="hidden" class="hidden_price_sum" id="hidden_xiaoji{$vo.id}" value="{$vo.price_sum}"/>
                    <input type="hidden" name="goods_id[]" class="goods_id" value="{$vo.goods_id}">
                    <input type="hidden" name="hidden_xuanze[]" class="hidden_xunaze" id="hidden_xunaze{$vo.id}" value="0">
                    <input type="hidden" name="type" value="0" >

                </a> 
                <b style="text-align:center; line-height:7em;"><img style="width:60px; height:60px; margin:5px;" src="{$vo.pic_url}" style="width:70%;height:5em;"></b>
                
                <strong>
                <p>{$vo.goods_title}</p>
                <p style="margin-top:5px; color:#666;">套餐：{$vo.taocan_name}
                <input type="hidden" name="taocan_name[]" value="{$vo.taocan_name}">
                </p>
                <p style="margin-top:5px; color:#666;">送：{$vo.fanli_jifen} 积分
                <input type="hidden" name="fanli_jifen[]" value="{$vo.fanli_jifen}">
                </p>
                <p class="Pressurized" style="margin-top:5px;">
                    <a href="javascript:void(0);"  onclick="num_minus({$vo.id})">-</a>
                    <input style="text-align:center; font-weight:600;" name="goods_num[]" id="goods_num{$vo.id}" type="text" value="{$vo.goods_num}">
                    <a href="javascript:void(0);" onclick="num_add({$vo.id})">+</a>
                </p>
                </strong>

                <span><p>￥{$vo.price_new}</p>
                 <input type="hidden" name="pic_url[]"  value="{$vo.pic_url}"/>
                 <input type="hidden" id="price_new{$vo.id}" name="price_new[]" value="{$vo.price_new}"/>
                 <input type="hidden" name="goods_title[]" value="{$vo.goods_title}"/>


                 <span onclick="del_one({$vo.id});" style="border:solid 1px #23CC77;  text-align:center; width:80%; marign-top:5px; color:#23CC77; padding:2px 8px;">删除</spanl>
                </span>
            </li>
            <p class="Subtotal"><span class="gray" id="good_num{$vo.id}">小计(共{$vo.goods_num}件)：</span>
            <span class="Orange size20" id="xiaoji{$vo.id}">￥{$vo.price_sum}元</span></p>
         </ul>
   </volist>  
  </div>
  
<div class="Navigation-Navigation">
   <span class="Handle size18" style="width:46%"><b>合计:</b><b class="Orange" id="price_heji">￥0元</b>
   </span>
    <input type="submit" class="Pay size18" style="width:32%; border:none; float:right;" id="price_heji_sum" value="结算">
</div>
</form>
</section>

<script>
    //清空购物车
    function del_all(){
        layer.open({
            content: '确认要全部清空吗？',
            btn: ['确认', '取消'],
            shadeClose: false,
            style: 'width:80%; height:40%;',
            yes: function(){
                window.location.href = "{:U('Goods/empty_cart')}";
            }
        });
    }
    
    //删除当前购物车中一个商品
    function del_one(id){
         $.post("{:U('Goods/del_onecart')}", { "id": id },
                    function(data){
                        if(data==1){
                            layer.msg('删除成功',5)
                            window.location.href = "{:U('Goods/goods_cart')}";
                        }else{
                            layer.msg('删除失败');
                        }
            }, "json");
    }
    
    //添加商品个数 
    function num_add(id){
        var goods_num =  $('#goods_num'+id).val();
        var num = parseInt(goods_num)+1
        if(num >99){
            alert('商品数量不能大于99');
            $('#goods_num'+id).val(99);
            num=99;
        }else{
            $('#goods_num'+id).val(num);
        }
        price_sum(id,num);
    }
    
    //减去商品个数
    function num_minus(id){
        var goods_num =  $('#goods_num'+id).val();
        var num = parseInt(goods_num)-1
        if(num < 1){
            alert('商品数量不能低于1');
            $('#goods_num'+id).val(1);
            num=1;
        }else{
            $('#goods_num'+id).val(num);
        }
        price_sum(id,num);
    }
    
      
  //检查是否全选
    function check_is_all(){
        var all = $('a.cart-select').length;
        if(all == 0){
            $('#select_all').attr('class','cart-select2');
        }else{
            $('#select_all').attr('class','cart-select');
        }
    }
  
  //计算单类商品 多个数量的价格之和
    function price_sum(id,num){
        var price_new = $('#price_new'+id).val();
        $.get("{:U('Goods/update_goods_num')}", { id:id,goods_num:num },function(data){
            price_new = price_new * num;
            if(data == 1){
                $('#xiaoji'+id).html('￥'+price_new);
                $('#good_num'+id).html('小计(共'+num+'件):');
                $('#hidden_xiaoji'+id).val(price_new);          
                price_heji();           
            }       
        });
    }
    //设置选中单个商品的图标状态
    function cart_select(id){
        var cart_select = $('#cart_select'+id).attr('class');
        if(cart_select == 'cart-select'){
            $('#cart_select'+id).attr('class','cart-select2');
            $('#hidden_xunaze'+id).val(1);
        }else{
            $('#cart_select'+id).attr('class','cart-select');
            $('#hidden_xunaze'+id).val(0);
        }
        price_heji();
        check_is_all();
    }
    //计算选中商品累加的价格之和
    function price_heji(){
        var str = 0;
        var num = $(".cart-select2 .hidden_price_sum").length;
            $(".cart-select2 .hidden_price_sum").each(function(key, val) {
                str += parseFloat($(this).val());
            });
            $('#price_heji').html('￥'+str+'元');
            $('#price_heji_sum').html('结算('+num+')');
    }
    //设置全选状态按钮图标
    function select_all(){
        var quanxuan = $('#select_all').attr('class');
        if(quanxuan == 'cart-select'){
            $('.cart-select').attr('class','cart-select2');
            $('.hidden_xunaze').val(1);
        }else{
            $('.cart-select2').attr('class','cart-select');
            $('.hidden_xunaze').val(0);
        }
        price_heji();
    }
    //返回页面之后，清楚所有选项
    $(function(){
        $('.hidden_xunaze').val(0);
    });
    //检查form提交
    function check_form(){
        var num = $(".cart-select2").length;
        if(num == 0){
            alert('至少选中一个商品');
            return false;
        }
        return true;
    }
</script>


</body>
</html>
